body,html{width: 100%;height: 100%;}
#container1{width: 100%;height: 100%;position: relative;background-image: url(../img/page3_bg.jpg); background-size: 100% 100%; overflow: hidden;display: none;}
.page3_btn_start{ position: absolute; left: 0; bottom: 0.2%; width: 100%; height: 8%;}
/*.imgContainer{ position: absolute; left: 10%; top: 50%; width: 80%; height: 40%;}*/
.circle1{ background: url(../img/page3_choosed_bg.png); background-size: 100% 100%; position: absolute; top: 75%; left: 10%; width: 15%; height: 8%;}
.img1{ position: absolute; top: 10%; left: 15%; width: 70%;}	
.circle2{ background: url(../img/4575_1453779105.png); background-size: 100% 100%; position: absolute; top: 75%; left: 33%; width: 15%; height: 8%; }
.img2{ position: absolute; left: 20%; width: 50%;}	
.circle3{ background: url(../img/4575_1453779105.png); background-size: 100% 100%; position: absolute; top: 75%; left: 56%; width: 15%; height: 8%; }
.img3{ position: absolute; left: 10%; width: 80%;}
.circle4{ background: url(../img/4575_1453779105.png); background-size: 100% 100%; position: absolute; top: 75%; left: 79%; width: 15%; height: 8%; }
.img4{ position: absolute; top: 25%; left: 10%; width: 90%;}


.cark4{ position: absolute; top: 53%; left: -10%; width: 100%; height: 25%;} 
.bg_circle{ position: absolute; top: 10%; left: -20%; width:50%; height: 30%;border-radius: 50%; background: red; opacity: 0.2;}
.liangdian{ position: absolute; left: 29%; top:16%; z-index: 6;}

.page1{ position: absolute; top: 15%; left: 5%; width: 90%; height: 40%;}
.page1One{ position: absolute; top: 112%; left: 20%; width: 3%; z-index: 5;-webkit-animation: dot 1.5s linear infinite; animation: dot 1.5s linear infinite;}
.page1Two{ position: absolute; top: 15%; left: 22%; width: 80%; height: 28%; z-index: 6;}
.page1Three{ position: absolute; top: 25%; left:-30%;width: 23%; z-index: 4; -webkit-animation: move1 0.5s linear forwards; animation: move1 0.5s linear forwards;}
.page1Four{ position: absolute; top: 7%; left: 100%; width: 60%;-webkit-animation: move2 0.5s linear forwards; animation: move2 0.5s linear forwards;}

/*点点的动画*/
@-webkit-keyframes dot{
	0%{
		transform:scale(1,1);
		}
	50%{
		transform:scale(2,2);
		}
	100%{
		transform:scale(1,1);
		}
}
/*第一按钮发动机*/
@-webkit-keyframes move1{
	from{
		
	}
	to{
		transform: translateX(150%);
	}
}
/*第一个按钮字儿动*/
@-webkit-keyframes move2{
	from{
		
	}
	to{
		transform: translateX(-100%);
	}
}

.page2One{ position: absolute; top: 105%; left: 38%; width: 3%; z-index: 5;-webkit-animation: dot 1.5s linear infinite; animation: dot 1.5s linear infinite; display: none;}
.page2Two{ position: absolute; top: 15%; left: 22%; width: 80%; height: 28%; z-index: 6;display: none;}
.page2Three{ position: absolute; top: 25%; left:-30%;width: 23%; z-index: 4; -webkit-animation: move1 0.5s linear forwards; animation: move1 0.5s linear forwards; display: none;}
.page2Four{ position: absolute; top: 7%; left: 100%; width: 45%;-webkit-animation: move2 0.5s linear forwards; animation: move2 0.5s linear forwards;display: none;}


.page3One{ position: absolute; top: 115%; left: 45%; width: 3%; z-index: 5;-webkit-animation: dot 1.5s linear infinite; animation: dot 1.5s linear infinite; display: none;}
.page3Two{ position: absolute; top: 15%; left: 22%; width: 80%; height: 28%; z-index: 6;display: none;}
.page3Three{ position: absolute; top: 25%; left:-30%;width: 23%; z-index: 4; -webkit-animation: move1 0.5s linear forwards; animation: move1 0.5s linear forwards; display: none;}
.page3Four{ position: absolute; top: 7%; left: 100%; width: 60%;-webkit-animation: move2 0.5s linear forwards; animation: move2 0.5s linear forwards; display: none;}


.page4One{ position: absolute; top: 115%; left: 45%; width: 3%; z-index: 5;-webkit-animation: dot 1.5s linear infinite; animation: dot 1.5s linear infinite; display: none;}
.page4Two{ position: absolute; top: 15%; left: 22%; width: 80%; height: 28%; z-index: 6;display: none;}
.page4Three{ position: absolute; top: 30%; left:-80%;width: 50%; z-index: 4; -webkit-animation: move1 0.5s linear forwards; animation: move1 0.5s linear forwards; display: none;}
.page4Four{ position: absolute; top: 7%; left: 100%; width: 60%;-webkit-animation: move2 0.5s linear forwards; animation: move2 0.5s linear forwards; display: none;}


